<template>
    <div class="bring-into-add">
        <div class="bring-into-add-select">
            <span>选择分组</span>
            <el-select v-model="bringIntoAddSelectValue" placeholder="请选择分组" style="width: 240px; margin-left: 10px">
                <el-option v-for="item in bringIntoAddSelectOptions" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </div>
        <div class="bring-into-btn">
            <div class="case-btn" @click="handleBringIntoAddMenu(0)">从病例库导入</div>
            <div class="new-case-btn" @click="handleBringIntoAddMenu(1)">添加新的病例</div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, defineEmits } from 'vue';
import { groupListOfTrial } from '@/api/trial/trial';

import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import group from '@/option/group/group';
const crud = ref();
const route = useRoute();
const emit = defineEmits();
const routerQuery = ref({});
routerQuery.value = route.query;
const router = useRouter();
const store = useStore();
let bringIntoAddSelectValue = ref(null);
let bringIntoAddSelectOptions = ref([]);
const props = defineProps({
    selectTab: {
        type: Number,
        default: 1,
    },
});
/*
  type 0:从病例库导入
  type 1:添加新的病例
*/
const handleBringIntoAddMenu = async type => {
    if (!bringIntoAddSelectValue.value) {
        ElMessage({
            message: '请选择分组',
            type: 'warning',
        });
        return;
    }
    if (type === 0) {
        router.push({
            // path: '/trial/caseBase',
            path: '/casemanagement/caseManagement',
            query: {
                selectTab: props.selectTab,
                trialId: routerQuery.value.trialId,
                groupId: bringIntoAddSelectValue.value,
            },
        });
    }
    if (type === 1) {

        emit('changeAddNewCase', bringIntoAddSelectValue.value);
    }
};
const initGroupListOfTrial = trialId => {
    groupListOfTrial(trialId).then(res => {
        const DATA = res.data.data;
        DATA.forEach(item => {
            bringIntoAddSelectOptions.value.push({
                value: item.id,
                label: item.name,
            });
        });
    });
};
onMounted(() => {
    if (routerQuery.value.trialId) {
        initGroupListOfTrial(routerQuery.value.trialId);
    }
});
</script>
<style scoped>
.bring-into-add {
    width: 100%;
    height: auto;
}

.bring-into-add-select {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.bring-into-btn {
    width: 100%;
    height: 150px;
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
}

.case-btn,
.new-case-btn {
    width: 49%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-btn {
    background-color: #00a65a;
}

.new-case-btn {
    background-color: #3c8dbc;
}
</style>
